<template>
	<nt-container calcTabbar v-model="scrollHeight">
		<view class="container">
			<nt-tabs :list="tabs" @click="changeTabs" :showMore="false" :current="tabIndex"></nt-tabs>
			<template v-if="list.length">
				<u-list @scrolltolower="getWorkerRepairPage" @refresherrefresh="refresherrefresh" enableBackToTop
					refresher-enabled :refresher-triggered="isPull" refresher-background="#F2F4F6"
					refresher-threshold="50" :height="`${scrollHeight - 50}px`">
					<view class="order-item" v-for="(it, index) in list" :key="index">
						<view class="order-item__type">
							<view class="order-item__type--label">
								{{it.mtype}}<text class="tag">[{{it.is_type}}单]</text><text
									style="margin-left: 8rpx;">{{it.create_time}}</text>
							</view>
							<view class="order-item__time">
								<view class="h_copy" @tap.stop="copyClick(it.customername,it.customerphone,it.address)">
									复制</view>

							</view>
						</view>
						<view class="order-item__name">
							<view class="order-item__name--label">
								{{it.customername}}
								<text class="order-item__name--mobile" @tap="makePhoneCall(it.customerphone)">
									{{it.customerphone}}
								</text>
							</view>
							<view class="order-item__name--tag">
								<nt-tag :text="it.utype"></nt-tag>
								<nt-tag :text="it.ctype"></nt-tag>
							</view>
						</view>
						<view class="order-item__addr" @tap="openMap({
								lat: it.navigation_lat,
								lng: it.navigation_lng,
								title: it.address
							})">
							{{it.address}}
							<view class="order-item__addr--range">{{ it.distance_text }}</view>
						</view>
						<view class="order-item__remarks">
							<view class="order-item__remarks--item" v-if="it.remarks">
								<view class="order-item__remarks--label">备注信息：</view>
								<view class="order-item__remarks--content">{{it.remarks}}</view>
							</view>
							<view class="order-item__remarks--item" v-if="it.worker_return_apply_content">
								<view class="order-item__remarks--label">师傅备注：</view>
								<view class="order-item__remarks--content">{{it.worker_return_apply_content}}</view>
							</view>
							<view class="order-item__remarks--item"
								v-if="it.worker_return_apply_images && it.worker_return_apply_images.length>0">
								<view class="order-item__remarks--label">师傅图片：</view>
								<view class="order-item__remarks--content">
									<nt-upload :images="it.worker_return_apply_images" mode="preview"></nt-upload>
								</view>
							</view>
							<view class="order-item__remarks--item" v-if="it.returnworker_username">
								<view class="order-item__remarks--label">归属师傅：</view>
								<view class="order-item__remarks--content start">
									{{it.returnworker_username}} <text
										style="color: var(--theme-color);margin-left: 10rpx"
										@tap="makePhoneCall(it.returnworker_mobile)">{{it.returnworker_mobile}}</text>
								</view>
							</view>
							<view class="order-item__remarks--item" v-if="it.worker_name">
								<view class="order-item__remarks--label">{{it.is_type}}师傅：</view>
								<view class="order-item__remarks--content">{{it.worker_name}}</view>
							</view>
							<view class="order-item__remarks--item" v-if="it.status_text">
								<view class="order-item__remarks--label">订单状态：</view>
								<view class="order-item__remarks--content" style="color: #f00;">{{it.status_text}}
								</view>
							</view>
							<view class="order-item__remarks--item" v-if="it.transfer_remarks">
								<view class="order-item__remarks--label">转单备注：</view>
								<view class="order-item__remarks--content">{{it.transfer_remarks}}</view>
							</view>
							<view class="order-item__remarks--item"
								v-if="it.transfer_images_list && it.transfer_images_list.length>0">
								<view class="order-item__remarks--label">转单图片：</view>
								<view class="order-item__remarks--content">
									<nt-upload :images="it.transfer_images_list" mode="preview"></nt-upload>
								</view>
							</view>
						</view>
						<!-- 返修记录 -->
						<view class="order-item__record" v-if="it.repairrecord.length>0 && it.is_type === '返修'">
							<view class="title-style">
								<view class="h_title">返修记录</view>
								<view class="h_title" @tap="it.click=!it.click">
									{{it.click===false?'展示':'隐藏'}}记录
								</view>
							</view>
							<template v-if="it.click==true">
								<view class="h_box" v-for="(recordItem,recordIndex) in it.repairrecord"
									:key="recordIndex" v-if="it.id != recordItem.id">
									<view class="h_text">
										<view class="h_t1">{{recordItem.worker_name}}</view>
										<view class="h_t2">{{recordItem.completion_date}}</view>
									</view>
									<view class="h_text">
										<view class="h_t3">返修故障内容：</view>
										<view class="h_t4">{{recordItem.problem_type}}</view>
									</view>
									<view class="h_text">
										<view class="h_t3">返修故障类型：</view>
										<view class="h_t4">{{recordItem.problem}}</view>
									</view>

								</view>
							</template>
						</view>

						<template v-if="it.powerStatus">
							<view class="order-item__group">
								<view class="order-item__group--btn full" v-if="it.powerStatus.postApplyOvertime === 1"
									@tap="nav(`/subpackage/order/pages/submit/form?id=${it.id}&mode=overtime`)">申请加班
								</view>

								<view class="order-item__group--btn hollow" v-if="it.powerStatus.postPraise === 1"
									@tap="toForm(it.id, 'praise')">上传好评</view>
								<view class="order-item__group--btn hollow"
									v-if="it.powerStatus.postApplyTransfer === 1" @tap="toForm(it.id, 'transfer')">
									转单[退回客服]</view>
							</view>
							<view class="order-item__group">
								<view class="order-item__group--btn full" v-if="it.powerStatus.postReception === 1"
									@tap="receiveOrderHandle(it.id)">接单</view>
								<view class="order-item__group--btn full" v-if="it.powerStatus.postComplete === 1"
									@tap="showModal(it, 'complete')">已完成</view>
								<view class="order-item__group--btn full" v-if="it.powerStatus.postDewancheng === 1"
									@tap="showModal(it, 'transfer')">转待完成</view>
								<view class="order-item__group--btn full"
									v-if="it.powerStatus.postOrderbranchMoney === 1"
									@tap="nav(`/subpackage/order/pages/submit/form?id=${it.id}&mode=setfees`)">
									{{it.is_worker_profit === 0 ? '设置费用' : '修改费用'}}
								</view>
								<view class="order-item__group--btn full" v-if="it.powerStatus.postPayment === 1"
									@tap="nav(`/subpackage/order/pages/payment/index?id=${it.id}`)">提交收款</view>
								<view class="order-item__group--btn default"
									@tap="nav(`/subpackage/order/pages/_id?id=${it.id}`)">查看详情</view>
								<view class="order-item__group--btn default" @tap="selectMore(it)">更多操作</view>
							</view>
						</template>
					</view>
				</u-list>
			</template>
			<u-empty icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
		</view>
		<nt-order-more :show="show" :id="orderInfo.id" :auth="orderInfo.powerStatus" @close="show = false" is_type="返修"
			:is_submit="orderInfo.is_submit"></nt-order-more>
		<u-modal :show="modalConfig.show" title="温馨提示" :content='modalConfig.content' show-cancel-button
			@close="modalConfig.show = false" @cancel="modalConfig.show = false" @confirm="confirmModal"></u-modal>
	</nt-container>
</template>

<script>
	import {
		getWorkerRepairList,
		transferDewancheng,
		receivingOrders,
		completeOrder,
		getCountTabs
	} from "@/api"
	import {
		getCacheList,
		cache
	} from '@/utils'
	import {
		appConfig
	} from "@/config"
	export default {
		data() {
			return {
				tabs: [{
						name: "全部",
						value: ''
					},
					{
						name: "送机",
						value: '送机'
					},
					{
						name: "带回",
						value: '带回'
					},
					{
						name: "送回",
						value: '送回'
					},
					{
						name: "返修",
						value: '返修'
					},
				],
				list: [],
				orderInfo: {},
				show: false,
				modalConfig: {
					show: false,
					title: "",
					content: ""
				},
				modalType: "",
				tabIndex: 0,
				params: {
					is_type: "",
					page: 1,
					limit: 10
				},
				isNext: true,
				scrollHeight: 0,
				isPull: false,
				md5: ''
			}
		},
		onShow() {
			this.params.is_type = ''
			this.tabIndex = 0
			this.init()
			this.time = new Date().getTime()
			// this.getLocalData()
			this.getWorkerRepairPage(this.time)
			this.$nextTick(() => this.getOrderCount())
		},
		methods: {
			copyClick(name, phone, address) {
				// let name = this.data.customername
				// let phone = this.data.customerphone
				// let address = this.data.address
				let copyData = name + ' ' + phone + ' ' + address
				uni.setClipboardData({
					data: copyData,
					success: function() {
						uni.showToast({
							icon: 'none',
							title: '复制成功',
						})
					}
				});
			},
			getLocalData() {
				const {
					list,
					md5
				} = getCacheList('repair', this.params.is_type)
				this.list = list || []
				this.md5 = md5 || ''
			},
			changeTabs(e) {
				if (e.index === this.tabIndex) return; 
				this.params.is_type = e.value
				this.tabIndex = e.index
				this.time = new Date().getTime()
				this.getOrderCount()
				this.init() 
				// this.getLocalData()
				this.getWorkerRepairPage(this.time)
			},
			scrolltolower() {},

			refresherrefresh() {
				this.isPull = true
				this.init()
				this.time = new Date().getTime()
				this.getWorkerRepairPage(this.time)
			},
			// 订单数量
			getOrderCount() {
				getCountTabs("worker_repair").then(res => {
					if (res.code === 1 && res.data) {
						this.$store.commit("user/SET_REPAT_COUNT", res.data.all || 0)
						const ntabs = JSON.parse(JSON.stringify(this.tabs))
						Object.entries(res.data).map(([key, value]) => {
							this.tabs = ntabs.map((item) => {
								if (key == item.value || (key === 'all' && item.value === '')) {
									if (value > 0) {
										item.badge = {
											value: value
										}
									} else {
										item.badge = undefined
									}
								}
								return item
							})
						})
					}

				})
			},
			// 送返修列表
			getWorkerRepairPage(time) {
				if (!this.isNext) return
				getWorkerRepairList(this.params).then(res => {
					const {
						code,
						data,
						md5
					} = res;
					if (this.time === time) {
						if (code === 1) {
							if (data?.data && data.data.length > 0) {
								data.data.forEach(o => o.click = false)
							}
							if (this.params.page === 1) {
								const cData = cache.get.repair() || {}
								cData[this.params.is_type] = {
									md5,
									list: JSON.parse(JSON.stringify(data.data)),
									expireTime: Date.now() + appConfig.listDataExpireTime
								}
								cache.set.repair(cData)
								this.list = []
							}
							this.list = this.list.concat(data.data)
							this.params.page++
							if (this.list.length >= data.total) {
								this.isNext = false
							}
						}
					}
				}).finally(() => {
					setTimeout(() => {
						this.isPull = false
					}, 500)
				})
			},
			showModal(it, mode) {
				console.log(mode)
				this.modalConfig.show = true
				this.orderInfo = it
				this.modalType = mode
				this.modalConfig.content = mode === "complete" ? "确定完成该订单吗？" : "确定将当前订单转待完成吗？"
			},
			confirmModal() {
				if (this.modalType === 'complete') { // 已完成
					this.completeCurrentOrder()
				} else { // 转待完成
					this.transferWaitComplete()
				}
			},
			// 订单已完成
			completeCurrentOrder() {
				completeOrder(this.orderInfo.id).then(res => {
					const {
						code,
						data
					} = res;
					if (code === 1) {
						this.toast("订单已完成")
						this.init()
						this.time = new Date().getTime()
						this.getWorkerRepairPage(this.time)
						this.modalConfig.show = false
						this.$nextTick(() => this.getOrderCount())
					}
				})
			},
			// 接单
			receiveOrderHandle(id) {
				// if(this.loading) return;
				// this.loading = true;
				receivingOrders(id).then(res => {
					const {
						code,
						data
					} = res;
					if (code === 1) {
						this.toast("接单成功")
						this.init()
						this.time = new Date().getTime()
						this.getWorkerRepairPage(this.time)
						this.$nextTick(() => this.getOrderCount())
					}
					// this.loading = false
				})
			},

			// 转待完成
			transferWaitComplete() {
				transferDewancheng(this.orderInfo.id).then(res => {
					if (res.code === 1) {
						this.toast("已转待完成")
						this.init()
						this.time = new Date().getTime()
						this.getWorkerRepairPage(this.time)
						this.$nextTick(() => this.getOrderCount())
						this.modalConfig.show = false
					}
				})
			},
			selectMore(it) {
				this.show = true
				this.orderInfo = it
			},
			toForm(id, mode) {
				this.nav(`/subpackage/order/pages/submit/form?id=${id}&mode=${mode}`)
			},
			init() {
				this.list = []
				this.isNext = true
				this.params.page = 1
			}
		}

	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";

	.title-style {
		display: flex;
		justify-content: space-between;
	}

	.h_copy {
		background: var(--theme-color);
		color: #fff;
		font-size: 24rpx;
		display: inline-block;
		padding: 0 10rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 4rpx;
		// margin-left: 20rpx;
	}
</style>